<template>
    <div class="photoinfo-container">
        <h3>{{ this.photoinfo.goods_name }}</h3>
        <p class="subtitle">
            <span>发表时间:{{ this.photoinfo.goods_price }}元</span>
            &nbsp;&nbsp;
            <span>点击: {{ this.photoinfo.goods_click }}次</span>
        </p>

        <hr>

        <!--缩略图区域-->
        <div class="thumbs">
            <vue-preview class="view" :slides="imageList" @close="handleClose"></vue-preview>
        </div>


        <!--图片内容区域-->
        <!--<div class="content" v-html="photoinfo.content"></div>-->
        <div class="content" v-text="photoinfo.shareDescription"></div>


        <!-- 放置一个现成的 评论子组件 -->
        <cmt-box :storeId="this.storeId"></cmt-box>
    </div>
</template>

<script type="text/ecmascript-6">

    import { Toast } from 'mint-ui'

    //1.导入评论子组件
    import comment from '../subcomponents/comment.vue'

    export default {
        name: 'xx',
        data() {
            return {
                storeId: this.$route.params.storeId, //从路由中获取到的 图片Id
                goodsId: this.$route.params.goodsId,
                photoinfo: {}, //图片详情
                imageList: [], //缩略图的数组
            };
        },
        created() {
            this.getPhotoInfo();
        },
        methods: {
            //获取图片商品的详情
            getPhotoInfo() {

                var pushData = {
                    goods_id: this.goodsId,
                    area_id: '',
                    store_id: this.storeId,
                    pp_id: '',
                }

                this.$http.post('mobile/index.php?act=goods&op=goods_detail',pushData).then(result => {
                    if (result.body.code == 200) {

                        console.log('图片详情:')
                        console.log(result)

                        this.photoinfo = result.body.datas.goods_info;
                        for(var i=0;i<7;i++){
                            var photo = {
                                src: result.body.datas.goods_image,
                                msrc:result.body.datas.goods_image,
//                                msrc: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2867168039,1469054201&fm=26&gp=0.jpg",
                                alt: 'picture1',
                                title: '美图一',
                                w:600,
                                h:400,

                            }
                            //把完整的数据保存到 list 中
                            this.imageList.push(photo)
                        }

                        Toast('获取图片详情成功!')

                    } else {

                        Toast('获取图片详情失败!')
                    }
                })

            },
            handleClose () {
                console.log('close event')
            },
        },
        components: {
            //注册 评论子组件
            "cmt-box": comment
        }
    }
</script>


<style lang="scss" rel="stylesheet/scss" >

    .photoinfo-container {
        padding:3px;
        h3 {
            color: #26a2ff;
            font-size: 15px;
            text-align: center;
            margin:15px 0;
        }

        .subtitle {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
        }

        .content{
            font-size: 13px;
            line-height:30px;
        }

        .thumbs {

            background-color: lightgray;
            overflow: hidden;

            .view figure {
                margin: 5px 10px;
            }

            .view a img{
                width: 30.33%;
                margin:5px;
                box-shadow: 0 0 8px #999;
                float:left;
            }

        }
    }

</style>